﻿@page "/components/collapse"
<LayoutContent AnchorItems="@(new[]{"基础折叠面板","手风琴模式","图标的显示位置","点击图标才响应折叠","禁用状态","无边框","右侧操作的折叠面板","自定义标题","API"})">
<PageHeader Title="Collapse 折叠面板">可以将较多或较复杂的内容进行分组，分组内容区可以折叠展开或隐藏。</PageHeader>

<Example Title="基础折叠面板">
    <Description>基础折叠面板，可自定义面板内容。</Description>
    <RunContent>
        <TCollapse>
            <TCollapsePanel Title="这是一个折叠标题">
                这部分是每个折叠面板折叠或展开的内容，可根据不同业务或用户的使用诉求，进行自定义填充。可以是纯文本、图文、子列表等内容形式。
                </TCollapsePanel>
            <TCollapsePanel Title="默认展开状态" Active>
                这部分是每个折叠面板折叠或展开的内容，可根据不同业务或用户的使用诉求，进行自定义填充。可以是纯文本、图文、子列表等内容形式。
            </TCollapsePanel>
            <TCollapsePanel Title="自定义折叠面板的内容">
                <TAlert Theme="Theme.Danger">
                    这里是一个错误的内容！
                </TAlert>
            </TCollapsePanel>
        </TCollapse>
    </RunContent>
    <CodeContent>
        @Code.Create(@"
```cshtml-razor
<TCollapse>
    <TCollapsePanel Title=""这是一个折叠标题"">
        这部分是每个折叠面板折叠或展开的内容，可根据不同业务或用户的使用诉求，进行自定义填充。可以是纯文本、图文、子列表等内容形式。
        </TCollapsePanel>
    <TCollapsePanel Title=""默认展开状态"" Active>
        这部分是每个折叠面板折叠或展开的内容，可根据不同业务或用户的使用诉求，进行自定义填充。可以是纯文本、图文、子列表等内容形式。
    </TCollapsePanel>
    <TCollapsePanel Title=""自定义折叠面板的内容"">
        <TAlert Theme=""Theme.Danger"">
            这里是一个错误的内容！
        </TAlert>
    </TCollapsePanel>
</TCollapse>
```
")
    </CodeContent>
</Example>
<Example Title="手风琴模式">
    <Description>手风琴模式折叠面板，一次只能打开一个面板。</Description>
    <RunContent>
        <TCollapse Mutex>
            <TCollapsePanel Title="这是一个折叠标题">
                这部分是每个折叠面板折叠或展开的内容，可根据不同业务或用户的使用诉求，进行自定义填充。可以是纯文本、图文、子列表等内容形式。
                </TCollapsePanel>
            <TCollapsePanel Title="默认展开状态" Active>
                这部分是每个折叠面板折叠或展开的内容，可根据不同业务或用户的使用诉求，进行自定义填充。可以是纯文本、图文、子列表等内容形式。
            </TCollapsePanel>
            <TCollapsePanel Title="自定义折叠面板的内容">
                <TAlert Theme="Theme.Danger">
                    这里是一个错误的内容！
                </TAlert>
            </TCollapsePanel>
        </TCollapse>
    </RunContent>
    <CodeContent>
        @Code.Create(@"
```cshtml-razor
<TCollapse Mutex>
    <TCollapsePanel Title=""这是一个折叠标题"">
        这部分是每个折叠面板折叠或展开的内容，可根据不同业务或用户的使用诉求，进行自定义填充。可以是纯文本、图文、子列表等内容形式。
        </TCollapsePanel>
    <TCollapsePanel Title=""默认展开状态"" Active>
        这部分是每个折叠面板折叠或展开的内容，可根据不同业务或用户的使用诉求，进行自定义填充。可以是纯文本、图文、子列表等内容形式。
    </TCollapsePanel>
    <TCollapsePanel Title=""自定义折叠面板的内容"">
        <TAlert Theme=""Theme.Danger"">
            这里是一个错误的内容！
        </TAlert>
    </TCollapsePanel>
</TCollapse>
```
")
    </CodeContent>
</Example>

<Example Title="图标的显示位置">
    <Description>@Code.Create("设置 `RightIcon=\"true\"` 使图标显示在右边，设置 `RightIcon=\"default\"` 隐藏图标")</Description>
    <RunContent>
        <TCollapse RightIcon="true">
            <TCollapsePanel Title="这是一个折叠标题">
                这部分是每个折叠面板折叠或展开的内容，可根据不同业务或用户的使用诉求，进行自定义填充。可以是纯文本、图文、子列表等内容形式。
                </TCollapsePanel>
            <TCollapsePanel Title="默认展开状态">
                这部分是每个折叠面板折叠或展开的内容，可根据不同业务或用户的使用诉求，进行自定义填充。可以是纯文本、图文、子列表等内容形式。
            </TCollapsePanel>
            <TCollapsePanel Title="自定义折叠面板的内容">
                <TAlert Theme="Theme.Danger">
                    这里是一个错误的内容！
                </TAlert>
            </TCollapsePanel>
        </TCollapse>

        <br />
        <br />
        <TCollapse RightIcon="default">
            <TCollapsePanel Title="这是一个折叠标题">
                这部分是每个折叠面板折叠或展开的内容，可根据不同业务或用户的使用诉求，进行自定义填充。可以是纯文本、图文、子列表等内容形式。
            </TCollapsePanel>
            <TCollapsePanel Title="默认展开状态">
                这部分是每个折叠面板折叠或展开的内容，可根据不同业务或用户的使用诉求，进行自定义填充。可以是纯文本、图文、子列表等内容形式。
            </TCollapsePanel>
            <TCollapsePanel Title="自定义折叠面板的内容">
                <TAlert Theme="Theme.Danger">
                    这里是一个错误的内容！
                </TAlert>
            </TCollapsePanel>
        </TCollapse>
    </RunContent>
    <CodeContent>
        @Code.Create(@"
```cshtml-razor
<TCollapse RightIcon=""true"">
    <TCollapsePanel Title=""这是一个折叠标题"">
        这部分是每个折叠面板折叠或展开的内容，可根据不同业务或用户的使用诉求，进行自定义填充。可以是纯文本、图文、子列表等内容形式。
        </TCollapsePanel>
    <TCollapsePanel Title=""默认展开状态"">
        这部分是每个折叠面板折叠或展开的内容，可根据不同业务或用户的使用诉求，进行自定义填充。可以是纯文本、图文、子列表等内容形式。
    </TCollapsePanel>
    <TCollapsePanel Title=""自定义折叠面板的内容"">
        <TAlert Theme=""Theme.Danger"">
            这里是一个错误的内容！
        </TAlert>
    </TCollapsePanel>
</TCollapse>


<TCollapse RightIcon=""default"">
    <TCollapsePanel Title=""这是一个折叠标题"">
        这部分是每个折叠面板折叠或展开的内容，可根据不同业务或用户的使用诉求，进行自定义填充。可以是纯文本、图文、子列表等内容形式。
        </TCollapsePanel>
    <TCollapsePanel Title=""默认展开状态"">
        这部分是每个折叠面板折叠或展开的内容，可根据不同业务或用户的使用诉求，进行自定义填充。可以是纯文本、图文、子列表等内容形式。
    </TCollapsePanel>
    <TCollapsePanel Title=""自定义折叠面板的内容"">
        <TAlert Theme=""Theme.Danger"">
            这里是一个错误的内容！
        </TAlert>
    </TCollapsePanel>
</TCollapse>
```
")
    </CodeContent>
</Example>

<Example Title="点击图标才响应折叠">
    <Description>@Code.Create("设置 `IconToggle` 则只能点击图标才会响应折叠或展开")</Description>
    <RunContent>
        <TCollapse IconToggle>
            <TCollapsePanel Title="这是一个折叠标题">
                这部分是每个折叠面板折叠或展开的内容，可根据不同业务或用户的使用诉求，进行自定义填充。可以是纯文本、图文、子列表等内容形式。
                </TCollapsePanel>
            <TCollapsePanel Title="默认展开状态" Active>
                这部分是每个折叠面板折叠或展开的内容，可根据不同业务或用户的使用诉求，进行自定义填充。可以是纯文本、图文、子列表等内容形式。
            </TCollapsePanel>
            <TCollapsePanel Title="自定义折叠面板的内容">
                <TAlert Theme="Theme.Danger">
                    这里是一个错误的内容！
                </TAlert>
            </TCollapsePanel>
        </TCollapse>
    </RunContent>
    <CodeContent>
        @Code.Create(@"
```cshtml-razor
<TCollapse IconToggle>
    <TCollapsePanel Title=""这是一个折叠标题"">
        这部分是每个折叠面板折叠或展开的内容，可根据不同业务或用户的使用诉求，进行自定义填充。可以是纯文本、图文、子列表等内容形式。
        </TCollapsePanel>
    <TCollapsePanel Title=""默认展开状态"" Active>
        这部分是每个折叠面板折叠或展开的内容，可根据不同业务或用户的使用诉求，进行自定义填充。可以是纯文本、图文、子列表等内容形式。
    </TCollapsePanel>
    <TCollapsePanel Title=""自定义折叠面板的内容"">
        <TAlert Theme=""Theme.Danger"">
            这里是一个错误的内容！
        </TAlert>
    </TCollapsePanel>
</TCollapse>
```
")
    </CodeContent>
</Example>

<Example Title="禁用状态">
    <Description>@Code.Create("设置 `Disabled` 禁用某个折叠面板")</Description>
    <RunContent>
        <TCollapse>
            <TCollapsePanel Title="这是一个折叠标题" Disabled>
                这部分是每个折叠面板折叠或展开的内容，可根据不同业务或用户的使用诉求，进行自定义填充。可以是纯文本、图文、子列表等内容形式。
                </TCollapsePanel>
            <TCollapsePanel Title="默认展开状态">
                这部分是每个折叠面板折叠或展开的内容，可根据不同业务或用户的使用诉求，进行自定义填充。可以是纯文本、图文、子列表等内容形式。
            </TCollapsePanel>
            <TCollapsePanel Title="自定义折叠面板的内容" Disabled>
                <TAlert Theme="Theme.Danger">
                    这里是一个错误的内容！
                </TAlert>
            </TCollapsePanel>
        </TCollapse>
    </RunContent>
    <CodeContent>
        @Code.Create(@"
```cshtml-razor
<TCollapse>
    <TCollapsePanel Title=""这是一个折叠标题"" Disabled>
        这部分是每个折叠面板折叠或展开的内容，可根据不同业务或用户的使用诉求，进行自定义填充。可以是纯文本、图文、子列表等内容形式。
        </TCollapsePanel>
    <TCollapsePanel Title=""默认展开状态"">
        这部分是每个折叠面板折叠或展开的内容，可根据不同业务或用户的使用诉求，进行自定义填充。可以是纯文本、图文、子列表等内容形式。
    </TCollapsePanel>
    <TCollapsePanel Title=""自定义折叠面板的内容"" Disabled>
        <TAlert Theme=""Theme.Danger"">
            这里是一个错误的内容！
        </TAlert>
    </TCollapsePanel>
</TCollapse>
```
")
    </CodeContent>
</Example>


<Example Title="无边框">
    <Description>@Code.Create("设置 `Borderless` 清除边框")</Description>
    <RunContent>
        <TCollapse Borderless>
            <TCollapsePanel Title="这是一个折叠标题">
                这部分是每个折叠面板折叠或展开的内容，可根据不同业务或用户的使用诉求，进行自定义填充。可以是纯文本、图文、子列表等内容形式。
                </TCollapsePanel>
            <TCollapsePanel Title="默认展开状态">
                这部分是每个折叠面板折叠或展开的内容，可根据不同业务或用户的使用诉求，进行自定义填充。可以是纯文本、图文、子列表等内容形式。
            </TCollapsePanel>
            <TCollapsePanel Title="自定义折叠面板的内容">
                <TAlert Theme="Theme.Danger">
                    这里是一个错误的内容！
                </TAlert>
            </TCollapsePanel>
        </TCollapse>
    </RunContent>
    <CodeContent>
        @Code.Create(@"
```cshtml-razor
<TCollapse Borderless>
    <TCollapsePanel Title=""这是一个折叠标题"">
        这部分是每个折叠面板折叠或展开的内容，可根据不同业务或用户的使用诉求，进行自定义填充。可以是纯文本、图文、子列表等内容形式。
        </TCollapsePanel>
    <TCollapsePanel Title=""默认展开状态"">
        这部分是每个折叠面板折叠或展开的内容，可根据不同业务或用户的使用诉求，进行自定义填充。可以是纯文本、图文、子列表等内容形式。
    </TCollapsePanel>
    <TCollapsePanel Title=""自定义折叠面板的内容"">
        <TAlert Theme=""Theme.Danger"">
            这里是一个错误的内容！
        </TAlert>
    </TCollapsePanel>
</TCollapse>
```
")
    </CodeContent>
</Example>


<Example Title="右侧操作的折叠面板">
    <Description>@Code.Create("设置 `OperationContent` 自定义右侧的操作内容，但是要显示地设置 `ChildContent` 设置显示的面板内容")</Description>
    <RunContent>
        <TCollapse>
            <TCollapsePanel Title="这是一个折叠标题">
                <ChildContent>
                    这部分是每个折叠面板折叠或展开的内容，可根据不同业务或用户的使用诉求，进行自定义填充。可以是纯文本、图文、子列表等内容形式。
                </ChildContent>
                <OperationContent>
                    <TButton Theme="Theme.Primary">操作</TButton>
                </OperationContent>
                </TCollapsePanel>
            <TCollapsePanel Title="默认展开状态" Active>

                <ChildContent>
                    这部分是每个折叠面板折叠或展开的内容，可根据不同业务或用户的使用诉求，进行自定义填充。可以是纯文本、图文、子列表等内容形式。
                </ChildContent>
                <OperationContent>
                    <TButton Theme="Theme.Primary">操作</TButton>
                </OperationContent>
            </TCollapsePanel>
            <TCollapsePanel Title="自定义折叠面板的内容">
                <ChildContent>
                    <TAlert Theme="Theme.Danger">
                        这里是一个错误的内容！
                    </TAlert>
                </ChildContent>
                <OperationContent>
                    <TButton Theme="Theme.Primary">操作</TButton>
                </OperationContent>
            </TCollapsePanel>
        </TCollapse>
    </RunContent>
    <CodeContent>
        @Code.Create(@"
```cshtml-razor
<TCollapse>
    <TCollapsePanel Title=""这是一个折叠标题"">
        <ChildContent>
            这部分是每个折叠面板折叠或展开的内容，可根据不同业务或用户的使用诉求，进行自定义填充。可以是纯文本、图文、子列表等内容形式。
        </ChildContent>
        <OperationContent>
            <TButton Theme=""Theme.Primary"">操作</TButton>
        </OperationContent>
    </TCollapsePanel>
    <TCollapsePanel Title=""默认展开状态"" Active>
        <ChildContent>
            这部分是每个折叠面板折叠或展开的内容，可根据不同业务或用户的使用诉求，进行自定义填充。可以是纯文本、图文、子列表等内容形式。
        </ChildContent>
        <OperationContent>
            <TButton Theme=""Theme.Primary"">操作</TButton>
        </OperationContent>
    </TCollapsePanel>
    <TCollapsePanel Title=""自定义折叠面板的内容"">
        <ChildContent>
            <TAlert Theme=""Theme.Danger"">
                这里是一个错误的内容！
            </TAlert>
        </ChildContent>
        <OperationContent>
            <TButton Theme=""Theme.Primary"">操作</TButton>
        </OperationContent>
    </TCollapsePanel>
</TCollapse>
```
")
    </CodeContent>
</Example>

<Example Title="自定义标题">
    <Description>@Code.Create("设置 `TitleContent` 自定义标题的内容，但是要显示地设置 `ChildContent` 设置显示的面板内容")</Description>
    <RunContent>
        <TCollapse>
            <TCollapsePanel>
                <TitleContent>
                    <TIcon Name="IconName.Download"/> 下载须知
                </TitleContent>
                <ChildContent>
                    这部分是每个折叠面板折叠或展开的内容，可根据不同业务或用户的使用诉求，进行自定义填充。可以是纯文本、图文、子列表等内容形式。
                </ChildContent>
                </TCollapsePanel>
            <TCollapsePanel>

                <ChildContent>
                    这部分是每个折叠面板折叠或展开的内容，可根据不同业务或用户的使用诉求，进行自定义填充。可以是纯文本、图文、子列表等内容形式。
                </ChildContent>
                <TitleContent>
                    <h2>请注意这个折叠面板</h2>
                </TitleContent>
            </TCollapsePanel>
            <TCollapsePanel>
                <ChildContent>
                    <TAlert Theme="Theme.Danger">
                        这里是一个错误的内容！
                    </TAlert>
                </ChildContent>
                <TitleContent>
                    <TButton Theme="Theme.Primary">点这里可以展开</TButton>
                </TitleContent>
            </TCollapsePanel>
        </TCollapse>
    </RunContent>
    <CodeContent>
        @Code.Create(@"
```cshtml-razor
<TCollapse>
    <TCollapsePanel>
        <TitleContent>
            <TIcon Name=""IconName.Download""/> 下载须知
        </TitleContent>
        <ChildContent>
            这部分是每个折叠面板折叠或展开的内容，可根据不同业务或用户的使用诉求，进行自定义填充。可以是纯文本、图文、子列表等内容形式。
        </ChildContent>
        </TCollapsePanel>
    <TCollapsePanel>

        <ChildContent>
            这部分是每个折叠面板折叠或展开的内容，可根据不同业务或用户的使用诉求，进行自定义填充。可以是纯文本、图文、子列表等内容形式。
        </ChildContent>
        <TitleContent>
            <h2>请注意这个折叠面板</h2>
        </TitleContent>
    </TCollapsePanel>
    <TCollapsePanel>
        <ChildContent>
            <TAlert Theme=""Theme.Danger"">
                这里是一个错误的内容！
            </TAlert>
        </ChildContent>
        <TitleContent>
            <TButton Theme=""Theme.Primary"">点这里可以展开</TButton>
        </TitleContent>
    </TCollapsePanel>
</TCollapse>
```
")
    </CodeContent>
</Example>
    <div id="API"></div>
<ComponentAPI  Component="typeof(TCollapse)"></ComponentAPI>
<ComponentAPI  Component="typeof(TCollapsePanel)"></ComponentAPI>
</LayoutContent>